<template>
	<view>
		<u-popup :show="showPop" mode="center" bgColor="transparent">
			<!-- 认证、绑定机具弹框组件 -->
			<xh-auth-pop :params="configData" 
			v-if="type == 'auth'" 
			@close="showPop = false"
			@submit="submit">
			</xh-auth-pop>
			<!-- 基础弹框组件 -->
			<xh-alert :params="configData" 
			v-if="type == 'alert'" 
			@close="showPop = false"
			@submit="submit">
			</xh-alert>
			<!-- 身份核验弹框组件 -->
			<xh-face-alert :params="configData" 
			v-if="type == 'face'" 
			@close="showPop = false"
			@submit="submit">
			</xh-face-alert>
			
		</u-popup>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import XhAuthPop from './xh-auth-pop.vue'
	import XhAlert from './xh-alert.vue'
	import XhFaceAlert from './xh-face-alert.vue'
	// 是否显示弹框
	let showPop = ref(false)
	//弹框配置信息
	let configData = ref({})
	// 默认alert基础弹框，auth：认证弹框
	let type = ref('alert')
	//点击按钮回调函数
	let buttonClickBlock = ()=>{}
	
	/**
	 * 显示弹框
	 * @param {string} type类型 认证弹框：auth 基础弹框：alert
	 * @param {object} config 弹框配置信息
	 * config.title 标题
	 * config.desc 描述信息
	 * config.icon 图标路径
	 * config.buttons [string] 操作按钮数组
	 */
	const show = (params = {type:'alert',config:{}},callback) => {
		buttonClickBlock = callback
		console.log('传递的参数：',params)
		if (!uni.$u.test.isEmpty(params.config)){
			configData.value = params.config
		}
		type.value = params.type
		showPop.value = true
	}
	//关闭
	const hide = () => {
		showPop.value = false
	}
	//选择操作按钮
	const submit = (value)=>{
		showPop.value = false
		buttonClickBlock(value)
	}
	// 暴露子组件的属性/方法给外界调用
	defineExpose({
		show,
		hide
	})
</script>

<style lang="scss" scoped>
	.auth-pop-box {
		width: 560rpx;
		padding: 50rpx 50rpx 60rpx;
		background-color: white;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		border-radius: 20rpx;
		overflow: hidden;
		.auth-pop-icon{
			width: 220rpx;
			height: 220rpx;
		}
		.auth-pop-title{
			color: $xh-title-color;
			font-size: 36rpx;
			font-weight: 500;
			margin-top: 30rpx;
		}
		.auth-pop-sub-title{
			color: $xh-subtitle-color;
			font-size: 28rpx;
			margin-top: 30rpx;
		}
		.auth-pop-btn{
			margin-top: 60rpx;
		}
	}
	.auth-pop-close-box {
		display: flex;
		justify-content: center;
		padding: 30rpx;
		.auth-pop-close-icon {
			width: 45rpx;
			height: 45rpx;
		}
	}
</style>